import React from 'react'
import { Toast, WhiteSpace, Card, SearchBar } from 'antd-mobile'
import IscrollLuo from './components/index'
import getQuery from '../../helpers/getQuery'
import { createForm } from 'rc-form';
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { actions as listActionCraetors } from '../../redux/modules/list'
import moment from 'moment';
import config from '../../../config';
import './index.less';

let timer = null;

class Login extends React.PureComponent {

  static contextTypes = {
    router: React.PropTypes.object.isRequired
  }

  state = {
    pageIndex: 1,
    pageSize: 10,
    str: '',
    loading: false,
    list: [],
    evaluateLastStamp: 0
  }

  componentWillMount() {
    this.fetchBaseCfg()
  }

  componentDidMount() {
    this.fetchList(1)
  }

  render() {
    const { getFieldProps } = this.props.form;
    return <section className="inner-page list-page">
      <div className="search-box">
        <SearchBar
          value={this.state.str}
          placeholder="柜号/司机/车牌号"
          cancelText=" "
          showCancelButton
          onClear={this.handleClear.bind(this)}
          onChange={this.handleChange.bind(this)}
        />
      </div>

      <div className="scroll-box">
        <IscrollLuo id="id"
          onDown={this.handleDown.bind(this)}
          onUp={this.handleUp.bind(this)}
          noUp={this.state.loading}
          noDown={this.state.loading}
          noUpStr={"已全部加载完毕"}
        >
          {this.props.list.length > 0 ? <div>{this.props.list.map((item,index) => 
            <Card full key={index}>
              <Card.Header
                title={item.OrderNo}
                extra={<span className="status" style={{ color: item.OrderEvaluateId ? '' : '#f30' }}>{item.OrderEvaluateId ? '已评价' : '未评价'}</span>}
              />
              <Card.Body>
                <div className="row">
                  <label>订舱号</label>
                  <span style={{fontWeight: 'bold'}}>{item.BookingNum || ''}</span>
                </div>

                <div className="row">
                  <label>柜号</label>
                  <span>{item.TankNo || ''}</span>
                </div>

                <div className="row">
                  <label>车牌</label>
                  <span className={item.SupplierName ? "carno": ""}>{item.SupplierName || ''}</span>
                </div>

                <div className="row">
                  <label>司机</label>
                  <span>{item.DriverName || ''} <em style={{fontSize: '12px',marginLeft: 10, color: '#108ee9'}}>{item.DriverMobile || ''}</em></span>
                </div>

                <div className="row">
                  <label>做柜时间</label>
                  <span>{item.PresentTime || ''}</span>
                </div>

                <div className="row">
                  <label>实际还柜时间</label>
                  <span>{item.ArkTime || ''}</span>
                </div>

                <div className="row">
                  <label>运单状态</label>
                  <span>{item.OrderStatusName || ''}</span>
                </div>
              </Card.Body>
              <div className="footer">
                {[10,11,12,13,14].indexOf(+item.OrderStatus) > -1 && moment(item.PresentTime).add(+this.state.evaluateLastStamp, 'days').valueOf() > moment().valueOf() && <span className="btn pingjia" onClick={this.handleDiss.bind(this, item)}><i className="iconfont icon-pingjia" />评价</span>}
                {item.SupplierName && <span className="btn ditu" onClick={this.handleMap.bind(this, item)}><i className="iconfont icon-ditu" />{item.ArkTime ? '轨迹' : '定位'}</span>}
              </div>
            </Card>
          )}</div> : <div className="nothing-data">暂无数据</div> }
        </IscrollLuo>
      </div>
    </section>
  }
  
  handleClear() {
    this.setState({
      str: '',
      pageIndex: 1
    }, this.fetchList)
  }

  handleChange(value) {
    clearTimeout(timer)
    this.setState({
      str: value,
      pageIndex: 1
    })
    timer = setTimeout(() => {
      this.setState({
        str: value,
        pageIndex: 1
      }, this.fetchList)
    }, 500)
  }

  handleDown() {
    this.setState({
      loading: !this.state.loading,
      pageIndex: 1
    })

    this.fetchList()
  }

  handleUp() {
    if (Math.ceil(this.props.pageCount) > this.state.pageIndex) {
      this.setState({
        loading: !this.state.loading,
        pageIndex: ++this.state.pageIndex
      }, this.fetchList)
    }
  }

  handleMap(item) {
    this.context.router.push(`${config.rootAlias}/list/map/${item.SupplierName}/${item.OrderNo}/${!!item.ArkTime}`)
  }

  handleDiss(item) {
    this.context.router.push(`${config.rootAlias}/list/detail/${item.OrderNo}`)
  }

  fetchBaseCfg() {
    this.props.actions.fetchBaseCfg({code: 'EvaluateDays'}, json => {
      if (json.IsSuccess) {
        this.setState({
          evaluateLastStamp: +json.Data.Value
        })
      }
    })
  }

  fetchList() {
    if (this.state.pageIndex == 1 && this.props.list.length == 0) {
      Toast.loading('数据请求中...', 100);
    }

    this.setState({
      loading: !this.state.loading
    })

    this.props.actions.fetchList({
      pageIndex: this.state.pageIndex,
      pageSize: 10,
      str: this.state.str
    }, json => {
      Toast.hide();
      this.setState({ 
        loading: false 
      })
      if (!json.IsSuccess) {
        Toast.fail(json.Msg, 1);
      }
    })
  }

}

const stateToProps = state => ({
  ...state.list
})

const dispatchToProps = dispatch => ({
  actions: bindActionCreators(listActionCraetors, dispatch)
})

export default connect(stateToProps, dispatchToProps)(createForm()(Login));
